<template>
  <!--清洗消毒地图-->
  <div class="map-box">
    <baidu-map
      class="map"
      v-if="!loading"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
    >
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!--略缩图-->
      <!--      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>-->
      <!--定位-->
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <!--自定义控件1（城市筛选）-->
      <bm-control class="map-btn map-btn-city">
        <a-button
          v-for="item in buttonList"
          size="large"
          @click="taggerCity(item)"
          :key="item.code"
          :type="activeCity === item.code ? 'primary' : 'default'"
        >
          {{ `${item.name}【${item.sum}】` }}
        </a-button>
      </bm-control>
      <!--自定义控件2（状态筛选）-->
      <bm-control class="map-btn map-btn-filter">
        <a-button
          v-for="item in filterList"
          size="large"
          @click="taggerStatus(item)"
          :key="item.id"
          :type="filterStatus === item.id ? 'primary' : 'default'"
        >
          {{ item.title }}
        </a-button>
      </bm-control>
      <!--自定义控件3（图例）-->
      <bm-control class="map-legend">
        <div class="map-legend-item-box">
          <div class="map-legend-item">
            <img :src="mapIconError" alt="">
            <span class="error">未检测</span>
          </div>
          <div class="map-legend-item">
            <img :src="mapIconSuccess" alt="">
            <span class="success">已检测</span>
          </div>
          <div class="map-legend-item">
            <img :src="mapIconWarning" alt="">
            <span class="warning">即将过期</span>
          </div>
          <div class="map-legend-item">
            <img :src="mapIconWarning" alt="">
            <span class="warning">已过期</span>
          </div>
        </div>
      </bm-control>
      <!--地图点-->
      <bm-marker
        v-for="item in mapList"
        :key="item.id"
        :icon="{
          url:
            item.jczt == 0
              ? mapIconError
              : item.jczt == 3
              ? mapIconSuccess
              : mapIconWarning,
          size: { width: 32, height: 32 },
        }"
        :position="{ lat: item.lat, lng: item.lng }"
        @click="infoWindowOpen(item)"
      >
      </bm-marker>
      <!--详情弹框-->
      <bm-info-window
        :show="mapViewShow"
        :position="{ lng: mapView.lng, lat: mapView.lat }"
        @close="infoWindowClose"
        @open="infoOpen"
      >
        <div class="map-info-box">
          <div><span>经营单位名称：</span>{{ mapView.jddwmc }}</div>
          <div><span>地址：</span>{{ mapView.door }}</div>
          <div><span>最后清洗日期：</span>{{ mapView.bgsj }}</div>
        </div>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import mapIconError from "./../../assets/img/map_icon_error.png";
import mapIconSuccess from "./../../assets/img/map_icon_success.png";
import mapIconWarning from "./../../assets/img/map_icon_warning.png";
export default {
  name: "detectMap",
  data() {
    return {
      center: "南昌",
      zoom: 12,
      activeCity: "360100",
      buttonList: [],
      filterStatus: "-1",
      filterList: [
        {
          title: "全部",
          id: "-1",
        },
        {
          title: "未检测",
          id: "0",
        },
        {
          title: "已检测",
          id: "3",
        },
        {
          title: "即将过期",
          id: "2",
        },
        {
          title: "已过期",
          id: "1",
        },
      ],
      mapList: [],
      mapViewShow: false,
      mapView: {},
      loading:false,
      mapIconWarning,
      mapIconSuccess,
      mapIconError,
    };
  },
  created() {
    this.getCity();
    this.getData();
  },
  methods: {
    taggerCity({ code , name}) {
      console.log(code)
      this.activeCity = code;
      this.center = code==0?'南昌':name;
      this.zoom = 12;
      this.getData();
    },
    taggerStatus({ id }) {
      this.filterStatus = id;
      this.getData();
    },
    getData() {
      this.loading = true;
      let query = {
        city: this.activeCity === "0" ? "" : this.activeCity,
        jczt: this.filterStatus === "-1" ? "" : this.filterStatus,
      };
      this.$axios
        .get("report/testReportInfo/map/jzktjcMapList", {
          params: query,
        })
        .then((res) => {
          this.loading = false;
          let {list} = res.data.result;
          this.mapList = list;
        });
    },
    getCity() {
      this.$axios.get("report/testReportInfo/map/jzktCitySize").then((res) => {
        console.log(res);
        let result = res.data.result;
        let total = 0;
        this.buttonList = [];
        result.forEach((item,index)=>{
          if(result.length!==(index+1)){
            total = total+item.sum*1;
            this.buttonList.push(item)
          }
        });
        this.buttonList.unshift({
          code: "0",
          name: "全部",
          sum:total,
        });
      });
    },
    infoOpen() {
      this.mapViewShow = true;
    },
    infoWindowOpen(item) {
      console.log(item);
      this.mapViewShow = true;
      this.mapView = item;
    },
    infoWindowClose() {
      this.mapViewShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.map-box {
  width: 100%;
  height: 100%;
  .map {
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
.map {
  .anchorBL {
    display: none !important;
  }
  .map-btn {
    display: flex;
    flex-wrap: wrap;
    .ant-btn {
      margin: 20px 0 0 20px;
    }
  }
  .map-btn-filter {
    top: 90% !important;
  }
  .map-info-box {
    margin-right: 20px;
    > div {
      margin-bottom: 5px;
      span {
        font-weight: bolder;
      }
    }
  }
  .map-legend{
    top: 70% !important;
    padding-left: 20px;
    .map-legend-item{
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      font-weight: bolder;
      img{
        width: 25px;
      }
    }
    .map-legend-item-box{
      width: 110px;
      padding: 10px;
      border-radius: 3px;
      background-color: white;
    }
    .success{
      color: #19be6b;
    }
    .error{
      color: #ed4014;
    }
    .warning{
      color: #ff9900;
    }
  }
}
</style>